<!DOCTYPE html>
<html>
  <head>
    <title>PhiloGL - US Wind Patterns</title>
    <link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" media="all" type="text/css" href="style.css" />
    <script src="../../build/PhiloGL.js"></script>
    <script src="models.js"></script>
    <script src="controls.js"></script>
    <script src="index.js"></script>
  </head>
  <body>
    <div id="log-panel" style="display:none;">
      <span id="log-message"></span>
    </div>
  
    <div id="fallback" class="fallback"></div>

    <div id="container">
      <div id="title">
        <h1>US Wind Patterns</h1>
      </div>

      <div class='controls'>
        Visualize the last 72 hour wind motion in the US.
      </div>

      <div class='description'>
        This map tracks wind direction (lines), speed (radius) and
        temperature (hue) measurements from 1200 weather stations across the country. 
        You can play an animation of the wind movements and hover the weather stations 
        in the map to get more 
        information. Use the slider at the bottom to focus on a
        particular hour.
      </div>

      <fieldset>
        Markers: 
          <input type='radio' name='group1' id='r1' checked> <label
            for='r1'>disk </label>
          <input type='radio' name='group1' id='r2'> <label
            for='r2'>circle </label>
          <input type='radio' name='group1' id='r3'> <label
            for='r3'>line </label> <br>
          
          <button id='play' class='blue'>Play 72 hour wind motion</button> 
      </fieldset>

      <div id="canvas-container">
        <canvas id="map" width="900" height="450"></canvas>
        <div id='front-layer'></div>
      </div>
      
      <fieldset>
        1h
        <input id='time' type='range' value='0' min='0' max='71'>
        72hs

        <div style='display: none'>
          <label for='slider'>Elevation (intensity): </label>
          0
          <input id='elevation' type='range' value='3' min='0' max='5' step='0.2'>
          1000
        </div>
      </fieldset>
  </div>
  
  <div class="footer">
    Copyright &copy; <a href="http://philogb.github.com/">Nicolas Garcia
      Belmonte</a> - Elevation map by <a
      href="http://weather.unisys.com/usgs/index.php">UNISYS</a> -
    Weather data by the <a
      href='http://www.nws.noaa.gov/climate/'>National Weather
      Service</a>.
  </div>
  
  <div class="tooltip hide" id="tooltip" style="width:auto;"></div>
  
  <script>
    if (!PhiloGL.hasWebGL()) {
      document.body.className = 'no-webgl';
      document.getElementById('fallback').innerHTML = ''
        +  '<div style="margin:10px;">'
        +   'Your browser (or hardware) does not support WebGL. Go <a href="http://get.webgl.org">here</a> to find more information.'
        +  '</div>'
        +   '<iframe title="YouTube video player" width="640" height="510" src="http://www.youtube.com/embed/NzDA2Rj3_uE" frameborder="0" allowfullscreen></iframe>';
    }
  </script>
</body>
</html>

